<template>  
    <div id="echart-line" :style="{width: '30%', height: '376px'}"></div>   
</template>

<script>

import * as echarts from 'echarts';

export default {
   
 methods:{

    initChart() {
     
let getchart = echarts.init(document.getElementById('echart-line'), 'dark');
const gaugeData = [
  {
    value: 80,
    name: '业主：',
    title: {
      offsetCenter: ['150%', '-20%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['190%', '-20%']
    }
  },
  {
    value: 40,
    name: '家属：',
    title: {
      offsetCenter: ['150%', '10%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['190%', '10%']
    }
  },
  {
    value: 60,
    name: '租户：',
    title: {
      offsetCenter: ['150%', '40%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['190%', '40%']
    }
  }
];
var option = {
  series: [
    {
      type: 'gauge',
      startAngle: 90,
      endAngle: -270,
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
        itemStyle: {
          borderWidth: 1,
          borderColor: '#464646'
        }
      },
      axisLine: {
        lineStyle: {
          width: 40
        }
      },
      splitLine: {
        show: false,
        distance: 0,
        length: 10
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        distance: 80
      },
      data: gaugeData,
      title: {
        fontSize: 14
      },
      detail: {
        width: 50,
        height: 14,
        fontSize: 14,
        color: 'inherit',
        borderColor: 'inherit',
        borderRadius: 20,
        borderWidth: 1,
        formatter: '{value}'
      }
    }
  ]
};


        getchart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          getchart.resize();
      });
    },

  }

}
</script>
